<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    


    <script>
        const canvas = document.createElement('canvas')
        canvas.width = 800 ;
        canvas.height = 800 ;
        canvas.style.border = "2px solid #ccc"
        canvas.style.background = 'skyblue'
        document.body.append(canvas)


        const ctx = canvas.getContext('2d')
        
        let angle = 0 ;
        
        function draw(){
            ctx.clearRect(0,0,800,800);
            ctx.save();
            ctx.beginPath()
            ctx.ellipse(700,700,400,300,angle,0,Math.PI*2,true)
            ctx.ellipse(100,700,300,400,angle,0,Math.PI*2,true)
            const gradient = ctx.createRadialGradient(400,400,0,400,400,400);
            gradient.addColorStop(0,'white')
            gradient.addColorStop(0.1,'steelblue')
            gradient.addColorStop(1,'blue')
            //ctx.ellipse(700,100,400,300,angle,0,Math.PI*2,false)
            //ctx.ellipse(100,100,300,400,angle,0,Math.PI*2,false)
            //  ctx.fill();
            ctx.clip();    
            ctx.fillStyle = gradient;
            ctx.fillRect(0,0,800,800);   
            
            angle += 0.01 ;//Math.PI / 32 ;
            ctx.restore();
            requestAnimationFrame(draw)
        }
        draw()
    </script>
    <div style="position: absolute; width: 100px;height: 100px;right: 
    100px;top: 100px;background-color: aqua;border:10px solid rebeccapurple"></div>
</body>
</html>